<template>
  <v-row justify="center">
    <v-dialog
      v-model="dialog_"
      transition="dialog-bottom-transition"
      max-width="600px"
    >
      <v-card>
        <v-card-title>
          <span class='text-h5'>照片信息</span>
        </v-card-title>
        <v-divider/>
        <v-card-text>
          <v-simple-table>
            <template v-slot:default>
              <thead>
              <tr>
                <th class="text-left">
                  Name
                </th>
                <th class="text-left">
                  Calories
                </th>
              </tr>
              </thead>
              <tbody>
              <tr
                v-for="item in desserts"
                :key="item.name"
              >
                <td>{{ item.name }}</td>
                <td>{{ item.calories }}</td>
              </tr>
              </tbody>
            </template>
          </v-simple-table>
        </v-card-text>
      </v-card>
    </v-dialog>
  </v-row>

</template>

<script>
  export default {
    name: 'imageDetail',
    computed: {
      dialog_: {
        get() {
          return this.dialog;
        },
        set(val) {
          //改变由父组件控制
          this.$emit('on-change-dialog', val);
        }
      },
    }
  }
</script>

<style scoped>

</style>
